<template>
  <div class="search-body">
    <a-form
      layout="inline"
      @submit.prevent="onSubmit"
      :form="form"
      class="search-list"
    >
      <div class="option-box">
        <a-form-item class="item" label="用户姓名">
          <a-input
            style="min-width:200px"
            v-decorator="[
              'username',
              {
                rules: [
                  {
                    pattern: /^[A-Za-z0-9\u4e00-\u9fa5]{0,10}$/gi,
                    message: '最大10个字符,不可输入特殊符号'
                  }
                ],
                initialValue: payload.username || ''
              }
            ]"
            placeholder="请输入姓名"
          ></a-input>
        </a-form-item>
        <a-form-item class="item" label="用户电话">
          <a-input
            style="min-width:200px"
            v-decorator="[
              'phone',
              {
                rules: [
                  {
                    pattern: /^1[3|4|5|6|7|8|9]\d{0,9}$/,
                    message: '请输入正确的电话号码'
                  }
                ],
                initialValue: payload.phone || ''
              }
            ]"
            placeholder="请输入电话号码"
          ></a-input>
        </a-form-item>
      </div>
      <!-- 按钮 -->
      <div class="action-box">
        <a-button htmlType="submit" type="primary">查询</a-button>
        <a-button @click="reset" class="reset">重置</a-button>
      </div>
    </a-form>
  </div>
</template>

<script>
export default {
  data() {
    const {
      username = '',
      phone = '',
      page = '1',
      per_page = '12'
    } = this.$route.query
    return {
      payload: {
        page: Number(page),
        per_page: Number(per_page),
        username,
        phone
      },
      form: this.$form.createForm(this)
    }
  },
  methods: {
    onSubmit() {
      this.form.validateFields((err, data) => {
        data.page = 1
        this.$parent.saveParams(data)
      })
    },
    reset() {
      const payload = {
        page: 1
      }
      Object.keys(this.payload).forEach(key => {
        if (!['page', 'per_page'].includes(key)) {
          payload[key] = ''
        }
      })
      this.$parent.saveParams(payload)
    }
  }
}
</script>

<style lang="less" scoped>
.search-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .action-box {
    .reset {
      margin-left: 10px;
    }
  }
}
.search-body {
  margin-bottom: 20px;
}
.item {
  margin: 10px 30px 10px 0;
}
</style>
